<template>
	<div class="pages">
		<!-- 主体内容 --->
		<section class="phone-container"
			:style="{'background-color': templateJson.bgColor,backgroundImage: 'url(' + templateJson.bgImg + ')',}">
			<div class="pointer-events">
				<!-- <!- 动态组件 --> -->
				<component :is="item.component" v-for="(item, index) in component" :key="index" :datas="item.setStyle"
					@click.native="activeComponent(item, index)" class="componentsClass" :data-type="item.type">
				</component>
			</div>
	</section> 
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				data: {
					id: null,
					name: "页面标题",
					templateJson: '{"name":"页面标题","details":"","isPerson":false,"isBack":true,"titleHeight":35,"bgColor":"rgba(249, 249, 249, 10)","bgImg":""}',
					component: '[{"component":"storenotecard","text":"文章模块","type":"2-2","active":true,"style":"storenotecardstyle","setStyle":{"text":"文章模块","name":"这里显示专题名称","commodityType":0,"moditystyle":0,"borderRadius":0,"textWeight":400,"noteLabels":true,"readingNumber":true,"praisePoints":true,"viewMore1":true,"viewMore2":true,"imageList":[],"positions":"bottom","linktype":"10","http":{}}}]'
				},
				templateJson: {},
				component: []
			};
		},
		mounted() {
			this.parseData();
			console.log(this.$route.params.id)
		},
		methods: {
			parseData() {
				axios.get('https://www.yunxianchang.com/backend/aseditor/4')
					.then(res => {
						// 请求成功，处理响应数据
						console.log(res.data);
						console.log(res.data);
						this.templateJson = JSON.parse(res.data.page_setup);
						console.log('templateJson==', this.templateJson)
						this.component = JSON.parse(res.data.page_components);
						console.log('component==', this.component)
					})
					.catch(error => {
						// 请求失败，处理错误信息
						console.error(error);
					});

			}
		}
	};
</script>
<style lang="less" scoped>
	.pages {
		max-width: 550px;
		margin: auto;
		padding: 0px;
		position: relative;
	}
</style>